<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta http-equiv="Content-Language" content="en-US"/>
        <meta content="index, follow" name="robots"/>
		<meta content="width=1024,maximum-scale=1.0" name="viewport"/>
		<meta content="Yoga ... is open group of people who are interested in practicing yoga in their daily life." name="description"/>
		<meta content="community, yoga" name="keywords"/>
		<title>Yoga ...</title>
		<link href="img/favicon.ico" rel="shortcut icon"/>
		<link href="img/favicon.ico" type="image/x-icon" rel="icon"/>
		<link href="img/favicon.ico"  media="(resolution: 132dpi)" rel="apple-touch-icon-precomposed"/>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&amp;sensor=false&amp;region=CZ"><!-- &amp;callback=mapsLoaded --> </script>

		<script type="text/javascript">
		$(document).ready(function(){
		    // TODO: shaddow under map dialog, drag and resize it with 'drag' and 'resize' events

		    $( ".ui-resizable" ).resizable();
		    $( ".ui-draggable" ).draggable( {handle: ".ui-draggable-handle", cancel: "#button_close"} );

		    $("#effect").hide();

			var mapInitialized = false;
		    $("#dialog_link").click(function() {
		      $("#effect").fadeIn("slow");
		      if (!mapInitialized) initializeMap();
		      return false;
		    });

		    $("#button_close").click(function() {
		      $( "#effect").fadeOut("fast");
		      return false;
		    });

		    $('#button_close, #dialog_link, #nav-home, #nav-classes, #nav-location, #nav-faq').hover(
		        function() { $(this).addClass('ui-state-hover'); },
		        function() { $(this).removeClass('ui-state-hover'); }
		     );

			$("#nav-home").click(function() {
				$("#other").hide();
				$("#main-inner").show();
				$("#nav-classes, #nav-location, #nav-faq").removeClass('ui-state-active');
				$(this).addClass('ui-state-active');
				return false;
			});

			$("#nav-classes, #nav-location, #nav-faq").click(function() {
				$("#main-inner").hide();
				$("#other").show();
				$("#nav-home, #nav-classes, #nav-location, #nav-faq").removeClass('ui-state-active');
				$(this).addClass('ui-state-active');
				return false;
			});

			function initializeMap() {
			    geocoder = new google.maps.Geocoder();
			    var myOptions = {
			        zoom: 16,
			        mapTypeId: google.maps.MapTypeId.ROADMAP
			    }
			    map = new google.maps.Map(document.getElementById("map"), myOptions);
			    geocoder.geocode({'address': 'Thakurova 1, Prague'}, function(results, status) {
			        if (status == google.maps.GeocoderStatus.OK) {
			            map.setCenter(results[0].geometry.location);
			            var marker = new google.maps.Marker({
			                map: map,
			                position: results[0].geometry.location
			            });
			        } else {
			            alert("Geocode was not successful for the following reason: " + status);
			        }
			    });
			    mapInitialized = true;
			}

		});

		</script>
		<style type="text/css">
		body {
		    background: url("img/background.jpg") repeat-x scroll 0 0 #CFF7FF;
		    text-align: justify;
		    color: #3E3E3E;
		}

		div .rounded {
		    border: #C8C8C8 1px solid;
		    behavior: url(border-radius.htc);
		    -khtml-border-radius:20px
			-webkit-border-radius:20px;
			-moz-border-radius:20px;
			border-radius:20px;
		}

		#wrapper {
		}

		#nav {
		    height: 100px;
			width: 980px;
		    font: 14px/20px arial,sans-serif;
		    text-align: center;
		}

		#nav-inner {
			float: right;
		}

		#nav-home {
		    //border-bottom: #C8C8C8 1px solid;
		    //border-left: #C8C8C8 1px solid;
			//background-color: #48A8E7;
			//color: white;
		    border-top: 0;
		    border-right: 0;
		    -moz-border-radius-bottomleft:20px;
			border-bottom-left-radius:20px;
			float: left;
			padding: 10px;
			padding-left: 20px;
			padding-right: 20px;
			width: 100px;
			cursor: pointer;
		}
		#nav-classes, #nav-location  {
		    border-left: 0;
		    border-right: 0;
		    border-top: 0;
			float: left;
			padding: 10px;
			padding-left: 20px;
			padding-right: 20px;
			width: 100px;
			cursor: pointer;
		}
		#nav-faq {
		    border-left: 0;
		    border-top: 0;
		    -moz-border-radius-bottomright:20px;
			border-bottom-right-radius:20px;
			float: left;
			padding: 10px;
			padding-left: 20px;
			padding-right: 20px;
			width: 100px;
			cursor: pointer;
		}

		#main {
			width: 980px;
			background-color: #FFFFFF;
			margin-bottom: 30px;
		}

		#main-inner {
			padding: 20px;
		}

		h1 {
			font:bold 30px/30px arial,sans-serif;
			padding:20px 20px 0;
			text-align: center;
			//color: #48A8E7;
		}
		p {
		    font: 18px/28px arial,sans-serif;
			padding: 10px;
		}
		#content {
			margin-top: 10px;
			height: 410px;
		}
		#img-yoga {
		    border: #C8C8C8 1px solid;
		}
		#img-yoga-div {
		    padding:10px;
			float: left;;
		}
		#text {
			display: inline-block;
			width: 590px;
		    padding-left:10px;
		}

		* {
			margin: auto;
			padding: 0;
		}

		.highlight {
		    font-weight: bold;
		}

		#copyright {
			width: 100%;
			text-align: center;
		    font: 12px/20px arial,sans-serif;
		}
		</style>
        <style type="text/css">
            #dialog_link {padding: 0 .7em 0 .2em;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: 0;top: 50%;margin-top: -8px;}
        </style>
	</head>
	<body>
	    <div id="wrapper">
		    <div id="nav">
				<div id="nav-inner">
					<div id="nav-home" class="ui-state-default ui-state-active"><a href="#">Yoga ...</a></div>
					<div id="nav-classes" class="ui-state-default"><a href="#">Classes</a></div>
					<div id="nav-location" class="ui-state-default"><a href="#">Location</a></div>
					<div id="nav-faq" class="ui-state-default"><a href="#">FAQ</div></a>
				</div>
			</div>
	        <div id="main" class="rounded" style="position: relative">
		        <div id="main-inner">
		            <div id="header" class="heading">
		                <h1>Welcome to Yoga ... </h1>
		            </div>
		            <div id="content">
			            <div id="img-yoga-div"><img id="img-yoga" src="img/yoga2.jpg" width="270"/></div>
						<div id="text">
							<p>Hi, I'm Olga Zhuravskaya, a young teacher of Indian yoga in Prague.</p>
							<p>You're warmly welcomed to join my yoga classes every Sunday at 12:00 in Masarykova koley, Thakurava 1, Prague 6, Dejvice.
							<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-extlink">Show Map</span></a>
							</p>
							<p>Whether you are a beginner hoping to touch your toes, or an experienced yogi willing to practice, or someone who just needs a break, come in, my yoga classes can improve your daily life!</p>
							<p><span class="highligh">To get started</span> just let me know you are coming by <a href="mailto:zhuravskaya.o@gmail.com">e-mail</a><br/> or call (+420 773 676 589) and come ideally 15 min. ahead of the class start.</p>
							<p>Looking forward to see you soon,<br/>Ing. Olga Zhuravskaya</p>
					 	</div>
					</div>
				</div>
				
                <div id="effect">
		            <div class="ui-overlay"><div class="ui-widget-overlay rounded"></div><!-- div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div --></div>
		            <div style="position: absolute; width: 400px; height: 400px;left: 300px; top: 30px; padding: 10px; margin: 50px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
                        <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix ui-draggable-handle">
                          <span class="ui-dialog-title" id="ui-dialog-title-dialog">Thakurava 1, Prague 6</span>
                          <a id="button_close" href="#" class="ui-dialog-titlebar-close ui-corner-all"><span class="ui-icon ui-icon-closethick">close</span></a>
                        </div>
						<div style="height: 3%"></div>
		                <div id="map" class="ui-dialog-content ui-widget-content" style="position: relative; width: 90%; height: 82%"></div>
	             </div>				 


	    	</div>
	        <div id="other" style="height: 510px; display: none"></div>
	    </div>
	
			<div id="copyright">
				Copyright &copy; 2011 Olga Zhuravskaya<br/>
				e-mail: zhuravskaya.o(at)gmail(dot)com, phone: +420 773 676 589
			</div>
	    </div>
	</body>

</html>